import React, { Component, createRef } from 'react'

// import axios from 'axios'

import { NavBar, Toast } from 'antd-mobile'

// import { List, AutoSizer } from 'react-virtualized'
import List from 'react-virtualized/dist/commonjs/List'
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer'

import { getCurrentCity, API } from '../../utils'

import './index.css'

// 格式化数据，拿到cityList和cityIndex
const formatCityList = list => {
  // cityList => { a: [], b: [], ... }
  // cityIndex => ['a', 'b', ...]
  const cityList = {}
  
  list.forEach(item => {
    // 获取首拼
    const firstLetter = item.short.slice(0, 1)
    cityList.hasOwnProperty(firstLetter) ? cityList[firstLetter].push(item) : cityList[firstLetter] = [item]
  })
  const cityIndex = Object.keys(cityList).sort()
  return { cityList, cityIndex }
}

// 格式化分类名称
const formatCateName = name => {
  switch (name) {
    case '#':
      return '当前定位'
    case 'hot':
      return '热门城市'
    default:
      return name.toUpperCase()
  }
}
/**
 * 分类名称的高度 { number }
 */
const CATE_HEIGHT = 36
/**
 * 城市名称的高度
 */
const CITY_NAME_HEIGHT = 50

// 存储有房源数据的城市列表
const CITY_WITH_HOUSES = ['北京', '上海', '广州', '深圳']

export default class CityList extends Component {
  state = {
    cityList: {},
    cityIndex: [],
    activeIndex: 0
  }
  refList = createRef()
  // 拿城市列表数据
  async getCityList() {
    // 获取所有城市数据
    const res = await API.get('/area/city', {
      params: {
        level: 1
      }
    })
    const { cityList, cityIndex } = formatCityList(res.data.body)

    // 获取热门城市数据
    const hotCity = await API.get('/area/hot')
    cityList['hot'] = hotCity.data.body
    cityIndex.unshift('hot')

    const currentCity = await getCurrentCity()
    // console.log('currentCity', currentCity, getCurrentCity());
    cityList['#'] = [currentCity]
    cityIndex.unshift('#')
    this.setState({
      cityList,
      cityIndex
    }, () => {
        this.refList.current.measureAllRows()
    })
    
    // console.log('格式化后的数据为：', cityList, cityIndex)
  }
  rowRenderer = ({
    key, // Unique key within array of rows
    index, // Index of row within collection
    isScrolling, // The List is currently being scrolled
    isVisible, // This row is visible within the List (eg it is not an overscanned row)
    style, // Style object to be applied to row (to position it)
  }) => {
    // console.log(this.state.cityIndex[index])
    // 分类名称
    const cityCateName = this.state.cityIndex[index]
    // 分类名称对应的城市数据
    // 根据分类名称从 cityList 中取出该分类对应的 城市数组数据
    const list = this.state.cityList[cityCateName]

    return (
      <div key={key} style={style} className="city">
        <div className="title">{formatCateName(cityCateName)}</div>
        {list.map(item => (
          <div className="name" key={item.value} onClick={() => {
            if (CITY_WITH_HOUSES.indexOf(item.label) > -1) {
        // console.log(item) { label: "上海", value: "AREA|dbf46d32-7e76-1196", pinyin: "shanghai", short: "sh"}
        // 有房源
        // 1 修改本地存储中保存的定位城市数据
        localStorage.setItem(
          'cityInfo',
                  JSON.stringify({ label: item.label, value: item.value })
                )
                // 2 返回上一页
                this.props.history.go(-1)
              } else {
                // 没有房源
                Toast.info('该城市暂无房源数据', 1.5, null, true)
              }
            }}>
            {item.label}
          </div>
        ))}
      </div>
    )
  }
  calcRowHeight = ({index}) => {
    const { cityIndex, cityList } = this.state
    // 分类名称
    const cityCateName = cityIndex[index]
    // 分类名称对应的城市列表数据（数组）
    const list = cityList[cityCateName]
    // 分类的高度： 36
    // 城市名称的高度： 50
    // 每一行高度的公式： 分类的高度 + 城市名称的高度 * 城市的数量
    // return 36 + 50 * list.length
    return CATE_HEIGHT + CITY_NAME_HEIGHT * list.length
  }
  // 渲染右侧城市索引列表
  renderCityIndex() {
    return this.state.cityIndex.map((item, index) => (
      <li key={item} className="city-index-item" onClick={() =>  {
        console.log('index', index);
        // this.setState({ activeIndex: index })
        this.refList.current.scrollToRow(index)
        localStorage.setItem('cityInfo', JSON.stringify())
      }
        }>
        <span className={index === this.state.activeIndex ? 'index-active' : ''}>
          {item === 'hot' ? '热' : item.toUpperCase()}
        </span>
      </li>
    ))
  }
  // 监听 List 组件的滚动
  // startIndex 表示视口内第一行的索引号
  // 实现高亮效果的时候,就是根据这一行的索引号,然后侧对应的 城市索引 实现高亮效果
  onRowsRendered = ({ startIndex }) => {
    // console.log(startIndex);
    
    // 只在索引变化时来更新状态即可
    if (this.state.activeIndex === startIndex) return
    this.setState({
      activeIndex: startIndex
    })
  }
  componentDidMount() {
    this.getCityList()
  }
  render() {
    return (
      <div className="citylist">
        <NavBar
          className="navbar iconfont icon-back"
          // 模式：亮色调
          mode="light"
          // 图标
          // icon={<Icon type="left" />}
          // 导航左边点击回调
          onLeftClick={() => this.props.history.push('/home')}
          // 导航右边内容
          // rightContent={[
          //   <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
          //   <Icon key="1" type="ellipsis" />,
          // ]}
        >城市选择</NavBar>
        <AutoSizer>
          {({ height, width }) => (
            <List
              ref={this.refList}
              width={width}
              height={height}
              rowCount={this.state.cityIndex.length}
              rowHeight={this.calcRowHeight}
              rowRenderer={this.rowRenderer}
              onRowsRendered={this.onRowsRendered}
              scrollToAlignment="start"
            />
          )}
        </AutoSizer>
        <ul className="city-index">{this.renderCityIndex()}</ul>
      </div>
    )
  }
}
